<template>
  <div class="artView">
   <HeaderView />
   <div class="artMain" ref="artMain">
     <div class="content">
        <div class="updown">
         <div v-show="isUpDown">下拉刷新</div>
         <div v-show="!isUpDown">
            <div v-show="isLoad">数据加载中...</div>
            <div v-show="!isLoad">数据请求成功</div>
         </div>
        </div>
        <div class="artBox" v-for="item in artList" :key="item.id">
           <ArtItem :itemObj=item />
        </div>
        <div class="more">
          <div v-show="!ismore">没有数据了</div>
          <div v-show="ismore">数据加载中...</div>
        </div>
     </div>
     </div>
   <TabBar />
  </div>
</template>

<script>
import { getArtFun } from '@/network/innerAxios'
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'

import HeaderView from '@/components/HeaderView'
import TabBar from '@/components/tabBar/TabBar'
import ArtItem from '@/components/ArtItem'
BScroll.use(Pullup)
BScroll.use(PullDown)
export default {
  data () {
    return {
      isUpDown: true,
      isLoad: true,
      ismore: false,
      artList: [],
      resData: [],
      bscroll: null,
      page: 1
    }
  },
  components: {
    HeaderView,
    TabBar,
    ArtItem
  },
  async mounted () {
    await this.getArtData()
    this.initScroll()
  },
  methods: {
    // 触底加载更多
    async pullupFun () {
      this.ismore = true
      if (!this.resData.length) {
        this.ismore = false
        this.bscroll.finishPullUp()
        return
      }
      this.page++
      await this.getArtData()
      //  结束触底
      this.bscroll.finishPullUp()
      // 重新渲染
      this.bscroll.refresh()
    },

    // 上拉加载
    async pullDownFun () {
      this.isUpDown = false
      setTimeout(async () => {
        this.page = 1
        this.artList = []
        await this.getArtData()
        this.isLoad = false
        setTimeout(() => {
          // 结束上拉
          this.bscroll.finishPullDown()
          this.isUpDown = true
          this.isLoad = true
        }, 1000)
      }, 2000)
      this.bscroll.refresh()
    },

    // 获取文章数据
    async getArtData () {
      await getArtFun(this.page).then(res => {
        const lodList = this.artList
        const newList = lodList.concat(res.data)
        this.artList = newList
        this.resData = res.data
        this.ismore = false
      })
    },
    // 初始化betterscroll
    initScroll () {
      this.bscroll = new BScroll(this.$refs.artMain, {
        pullUpLoad: true,
        //  开启下拉刷新
        pullDownRefresh: true,
        click: true
      })
      this.bscroll.on('pullingUp', this.pullupFun)
      this.bscroll.on('pullingDown', this.pullDownFun)
    }
  }
}
</script>

<style lang="less" scoped>
.artMain{
  height: calc(100vh - 2rem);
  overflow: hidden;
  padding: 0 0.2rem;
  .more,.updown{
    font-size: 0.28rem;
    color: #ccc;
    line-height: 1rem;
    text-align: center;
  }
  .updown{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transform: translateY(-100%);
  }
  .artBox{
    padding-top: 0.1rem;
  }
}
</style>
